<template>
	<view class="jf-menu">
		<scroll-view scroll-x="true" class="jf-menu_scroll">
			<view class="jf-menu_list">
				<template v-for="(item,index) in props.list" :key="index">
					<view class="jf-menu_item" :class="{'active':index === props.modelValue}" @click="sel(index)">{{item.label}}</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	interface Item{
		label: string
		value: number
	}
	const props = withDefaults(defineProps<{
		top?: number
		list?: Item[]
		modelValue?: number
	}>(),{
		top: 0,
		list: () => [],
		modelValue: 0
	})
	const emits = defineEmits<{
		(e:"update:modelValue", current:number)
		(e:"change", current:number, value:number)
	}>()
	
	
	
	const sel = (current:number):void => {
		emits("update:modelValue", current)
		emits("change", current, props.list[current].value)
	}
</script>

<style lang="scss">
	.jf-menu{
		position: relative;
		width: 100vw;
		height: 100rpx;
		background: #ffffff;
		.jf-menu_scroll{
			width: calc(100vw - 64rpx);
			height: 100rpx;
			margin-left: 32rpx;
			.jf-menu_list{
				height: 70rpx;
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				.jf-menu_item{
					flex-shrink: 0;
					font-size: 28rpx;
					color: #6B7280;
					font-weight: 400;
					margin-right: 56rpx;
					&.active{
						position: relative;
						font-size: 36rpx;
						color: #1F2937;
						font-weight: 600;
						&::before{
							position: absolute;
							left: 0;
							bottom: 4rpx;
							content: "";
							width: 100%;
							height: 12rpx;
							background: linear-gradient(270deg, rgba(163,105,255,0) 0%, #3972FF 100%);
							border-radius: 6rpx;
						}
					}
				}
			}
		}
	}
	// .jf-menu_block{
	// 	width: 100vw;
	// 	height: 100rpx;
	// }
</style>
